<%-- 
    Document   : map
    Created on : Dec 19, 2013, 8:06:26 PM
    Author     : brlnt
--%>
<%@page import="java.util.List"%>
<%@page import="bean.PelaporanBean"%>
<%@page import="model.PelaporanDB"%>
<% List listdata = new PelaporanDB().getAllPelaporan(); %>
<% PelaporanBean data; %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title><!--%=request.getAttribute("title")%-->SIPERANAS</title>

        <!-- Bootstrap core CSS -->
        <link href="${initParam.css}/bootstrap.css" rel="stylesheet">
        <link href="${initParam.css}/bootstrap-responsive.min.css" rel="stylesheet">

        <!-- Add custom CSS here -->
        <link href="${initParam.css}/stylish-portfolio.css" rel="stylesheet">
        <link href="${initParam.fontaw}/css/font-awesome.min.css" rel="stylesheet">
        <link href="${initParam.css}/custom.css" rel="stylesheet">
        <script src="${initParam.js}/jquery-1.10.2.js"></script>
        <script>
            jQuery(function($) {
                // Asynchronously Load the map API 
                var script = document.createElement('script');
                script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            });

            function initialize() {
                var map;
                var bounds = new google.maps.LatLngBounds();
                
                var styles = [
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            {"color": "#6a5acd"},
                            {"visibility": "on"},
                            {"weight": 2.1}
                        ]
                    }, {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            {"visibility": "simplified"}
                        ]
                    }
                ];

                // Create a new StyledMapType object, passing it the array of styles,
                // as well as the name to be displayed on the map type control.
                var styledMap = new google.maps.StyledMapType(styles, {name: "SIPERANAS"});
                        
                var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(-7.27972, 112.737526),
                    mapTypeControlOptions: {
                        scrollwheel: false,
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };
                
                // Display a map on the page
                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                map.setTilt(45);
                
                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');
                
                // Multiple Markers
                var markers =  [ //looping disini
                    <% for(int i=0; i < listdata.size(); i++){ %>
                        <% data = (PelaporanBean) listdata.get(i); %>
                        ['<%=data.getNamasungai()%>', <%=data.getLokasisungai()%>]
                        <%
                            if(listdata.size()-1 == i){
                            }else{
                                out.print(",");
                            }
                        %>
                    <% } %>
                ];

                // Info Window Content
                var infoWindowContent = [ // looping value
                    <% for(int i=0; i < listdata.size(); i++){ %>
                        <% data = (PelaporanBean) listdata.get(i); %>
                        ['<div class="info_content">'+
                            '<h3><%=data.getNamasungai()%></h3>'+
                            '<p><%=data.getDeskripsi()%></p>'+
                            '<a href="#" class="btn btn-primary">View Details</a>'+
                         '</div>']
                        <%
                            if(listdata.size()-1 == i){
                            }else{
                                out.print(",");
                            }
                        %>
                    <% } %>
                ];

                // Display multiple markers on a map
                var infoWindow = new google.maps.InfoWindow(), marker, i;

                // Loop through our array of markers & place each one on the map  
                for (i = 0; i < markers.length; i++) {
                    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                    bounds.extend(position);
                    marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: markers[i][0]
                    });

                    // Allow each marker to have an info window    
                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infoWindow.setContent(infoWindowContent[i][0]);
                            infoWindow.open(map, marker);
                        }
                    })(marker, i));
                    
                    // Automatically center the map fitting all markers on the screen
                    //map.fitBounds(bounds);
                }

                // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
                /* var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                    this.setZoom(14);
                    google.maps.event.removeListener(boundsListener);
                }); */
                google.maps.event.addListener(map, 'click', function(event) {
                //call function to create marker
                    $("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng());
                    $("#coordinate").select();
                    
                    //delete the old marker
                    if (marker) { marker.setMap(null); }

                    //add marker onclick
                     marker = new google.maps.Marker({ position: event.latLng, map: map});

                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas" class="map"></div>
        <input type="text" id="coordinate" name="lokasi">
    </body>
</html>